<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        body {
            margin: 0;
            font-family: "Microsoft YaHei", "微软雅黑";
            background-color: #f4f6f9;
            color: #333;
        }

        /* 顶部导航栏 */
        .top-nav {
            width: 95%;
            height: 80px;
            background-color: #1E90FF;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
            padding: 0 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .top-nav .logo {
            font-size: 25px;
            font-weight: bold;
            letter-spacing: 1px;
            margin-left: 20px;
        }

        .top-nav .user {
            font-size: 16px;
        }

        .top-nav .user a {
            color: white;
            text-decoration: none;
            margin-left: 15px;
        }

        .top-nav .user a:hover {
            text-decoration: underline;
        }

        .container {
            display: flex;
            height: calc(100vh - 80px);
        }

        /* 左侧导航栏 */
        .sidebar {
            width: 200px;
            background-color: #2F4F9D;
            color: white;
            display: flex;
            flex-direction: column;
            padding-top: 30px;
        }

        .sidebar a {
            padding: 15px 20px;
            text-decoration: none;
            color: white;
            font-size: 16px;
            display: block;
            text-align: center;
        }

        .sidebar a:hover,
        .sidebar a.active {
            background-color: #4169E1;
            border-left: 5px solid #FFD700;
        }

        /* 主体内容 */
        .main-content {
            flex: 1;
            padding: 40px;
            overflow-y: auto;
        }

        .main-content h1 {
            color: #1E90FF;
            font-size: 26px;
            margin-bottom: 10px;
        }

        /* ====== 轮播图样式 ====== */
        .carousel {
            position: relative;
            width: 100%;
            height: 300px;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
            margin-bottom: 30px;
        }

        .carousel img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            position: absolute;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .carousel img.active {
            opacity: 1;
        }

        /* ====== 服务入口卡片 ====== */
        .service-grid {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .service-card {
            width: 160px;
            height: 160px;
            background-color: white;
            border-radius: 20px;
            text-align: center;
            padding: 20px;
            margin: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        .service-card img {
            width: 120px;
            height: 120px;
            margin-bottom: 10px;
        }

        .service-card p {
            font-size: 16px;
            color: #1E90FF;
            font-weight: bold;
        }

        /* 响应式布局 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                flex-direction: row;
                justify-content: space-around;
                padding: 10px 0;
            }

            .sidebar a {
                padding: 10px;
                font-size: 14px;
            }

            .service-card {
                width: 45%;
            }
        }
    </style>
</head>

<body>

<!-- 顶部导航栏 -->
<div class="top-nav">
    <div class="logo">智慧银行系统</div>
    <div class="user" id="user-info">
        <a href="login.html">登录&nbsp&nbsp</a> |
        <a href="register.html">注册</a>
    </div>
</div>

<div class="container">
    <!-- 左侧导航 -->
    <div class="sidebar">
        <a href="index.html" class="active">首页</a>
        <a href="deposit.html">存款服务</a>
        <a href="transfer.html">取款服务</a>
        <a href="transfer.html">转账服务</a>
        <a href="transactions.html">账户流水</a>
        <a href="user.html">个人中心</a>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
        <h1>欢迎使用智慧银行系统</h1>
        <p>本系统为银行内部管理系统，支持存取款业务、流水查询与账户管理等功能。<br>
            请通过左侧导航栏或下方服务入口开始操作。</p>

        <!-- 轮播图 -->
        <div class="carousel" id="carousel">
            <img src="images/bank1.png" class="active" alt="智慧金融">
            <img src="images/bank2.png" alt="便捷服务">
            <img src="images/bank3.png" alt="安全保障">
        </div>

        <!-- 服务入口卡片 -->
        <div class="service-grid">
            <div class="service-card" onclick="location.href='deposit.html'">
                <img src="images/deposit.png" alt="存款">
                <p>存款</p>
            </div>
            <div class="service-card" onclick="location.href='withdraw.html'">
                <img src="images/withdraw.png" alt="取款">
                <p>取款</p>
            </div>
            <div class="service-card" onclick="location.href='transfer.html'">
                <img src="images/transfer.png" alt="转账服务">
                <p>转账服务</p>
            </div>
            <div class="service-card" onclick="location.href='transactions.html'">
                <img src="images/trans.png" alt="流水查询">
                <p>流水查询</p>
            </div>
            <div class="service-card" onclick="location.href='user.html'">
                <img src="images/user.png" alt="个人信息">
                <p>个人信息</p>
            </div>
        </div>
    </div>
</div>

<script>
    // 登录状态演示
    const isLoggedIn = false;
    const username = "张三";
    const gender = "先生";
    const userInfo = document.getElementById("user-info");
    if (isLoggedIn) {
        userInfo.innerHTML = `欢迎您，${username}${gender}`;
    }

    // 简单轮播图切换逻辑
    const images = document.querySelectorAll('#carousel img');
    let index = 0;
    setInterval(() => {
        images[index].classList.remove('active');
        index = (index + 1) % images.length;
        images[index].classList.add('active');
    }, 3000);

    window.onload = function () {
        const user = JSON.parse(localStorage.getItem("user"));
        if (!user) {
            window.location.href = "login.html";
            return;
        }

        const userDisplay = document.querySelector(".user");
        const title = user.gender === "男" ? "先生" : "女士";
        userDisplay.textContent = `亲爱的 ${user.name}${title}`;

        filterTransactions(user.cardNumber);
    };
</script>

</body>

</html>
